<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<!DOCTYPE HTML>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>举报</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h0EKj4yWH81COWhXGS4G7uyi"></script>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-style.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/cancel.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/city/css/public-common.css"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        body, html {
            overflow: auto;
        }

        .title {
            border-bottom: 1px #dbdbdb solid;
            padding-bottom: 0.4rem;
        }
    </style>
</head>
<body>
<!-- 内容 -->
<div id="main">

    <!-- 头部 -->
    <header>
        <img src="${contextPath}/resources/city/image/return.png" id="fanHui"/>
        <span id="tilte">举报</span>
    </header>
    <form:form method="post" id="formWarpp" commandName="formDto">
        <form:hidden path="creatorUuid" id="creatorUuid"/>
        <form:hidden path="jsSDKSignature.appid"/>
        <form:hidden path="jsSDKSignature.timestamp"/>
        <form:hidden path="jsSDKSignature.nonceStr"/>
        <form:hidden path="jsSDKSignature.signature"/>
        <form:hidden path="locationX" id="map-lng"/>
        <form:hidden path="locationY" id="map-lat"/>
        <form:hidden path="caseCategoryUuid" id="caseCategoryUuid"/>
        <c:forEach items="${formDto.categoryList}" var="category" varStatus="status">
            <form:hidden path="categoryList[${status.index}].name"/>
            <form:hidden path="categoryList[${status.index}].uuid"/>
        </c:forEach>
        <div class="warning">
            <img src="${contextPath}/resources/city/image/!.png"/>

            <p>温馨提示：请开启GPS定位功能，上传地理位置信息，以便精确定位处理问题。</p>
        </div>

        <c:if test="${not empty formDto.categoryList}">
            <div class="content">
                <div class="reason bg">
                    <div class="title">案件分类</div>
                    <div class="phone">
                        <select class="form-control categoryList">
                            <option value="">请选择案件分类</option>
                            <c:forEach items="${formDto.categoryList}" var="item">
                                <option value="${item.uuid}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <c:forEach items="${formDto.categoryList}" var="item">
                        <custom:front_case_category_list item="${item}"/>
                    </c:forEach>
                </div>
            </div>
            <div class="content hide">
                <div class="reason bg">
                    <div class="title">已选择分类</div>
                    <div class="phone caseCategoryName" style="line-height:1rem;">
                    </div>
                </div>
            </div>
        </c:if>

        <div class="content">
            <div class="reason bg">
                <div class="title">问题图片</div>
                <div class="upImg hide">
                    <input type="hidden" name="" value="">
                    <img src="${contextPath}/resources/images/loaders/loader10.gif"/>
                </div>
                <c:forEach items="${formDto.imageList}" var="item" varStatus="status">
                    <div class="upImg">
                        <input type="hidden" name="imageList[${status.index}].url" value="${item.url}">
                        <img src="${item.url}"/>
                    </div>
                </c:forEach>
                <div class='upload
                    <form:errors path="imageList"> error</form:errors>
                '></div>
            </div>
        </div>

        <div class="content">
            <div class="reason bg">
                <div class="title">问题及位置描述</div>
                <form:textarea path="addressDescription" placeholder="请填写问题及位置描述,例如:瑞联路167号井盖缺失,青华路10号门前垃圾桶破损"
                               cssErrorClass="error text-danger"/>
            </div>
        </div>

        <div class="content">
            <div class="reason bg">
                <div class="title">移动电话</div>
                <div class="phone">
                    +86 <form:input path="phone" placeholder="手机号码" cssErrorClass="error text-danger"/>
                </div>
            </div>

            <div class="bg-blue" id="submit">
                提交
            </div>
        </div>

        <br/>
    </form:form>
</div>
<div id="ditu"></div>
<br/>
</body>
<script src="${contextPath}/resources/city/js/remJs.js"></script>
<script src="${contextPath}/resources/city/js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#fanHui').click(function () {
            self.location.href = "javascript:window.history.go(-1);";
        });

        $("#submit").click(function () {
            $("#formWarpp").submit();
        });

        $(".categoryList").change(function () {
            var value = $(this).val();
            $("#caseCategoryUuid").val(value);
            $(this).parents(".phone").nextAll().addClass("hide");
            if (value != '') {
                $(".phone[parent=" + value + "]").removeClass("hide");
                $(".caseCategoryName").html($(this).find("option:selected").text());
                $(".caseCategoryName").parents(".content").show();
            }
        });

        $(".upload").click(function () {
            wx.chooseImage({
                count: 5,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    for (var i = 0; i < res.localIds.length; i++) {
                        addImageItem(res.localIds[i]);
                    }
                }
            });
        });
    });

    function addImageItem(url) {
        wx.uploadImage({
            localId: url, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端ID
                var clone = $(".upImg:first").clone();
                clone.removeClass("hide");
                $(".upImg:last").after(clone);
                clone.find("img").attr("src", url);
                clone.find("input").attr("name", "imageList[" + ($(".upImg").length - 2) + "].url").val("wxImage:" + serverId);
            }
        });
    }

    //JSSDK获取地理位置
    wx.config({
        debug: false,
        appId: '${formDto.jsSDKSignature.appid}',
        timestamp: '${formDto.jsSDKSignature.timestamp}',
        nonceStr: '${formDto.jsSDKSignature.nonceStr}',
        signature: '${formDto.jsSDKSignature.signature}',
        jsApiList: ['onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'onVoicePlayEnd',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'translateVoice',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard']
    });

    var map = new BMap.Map("ditu");
    map.centerAndZoom('成都', 14);
    map.enableScrollWheelZoom();

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (result) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            $("input#map-lng").val(result.point.lng);
            $("input#map-lat").val(result.point.lat);
        } else {
            alert('定位出现错误,请打开GPS并重试!');
        }
    })
</script>
</html>